<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定引入</title>
</head>
<body>
<div id="app">
    <label for="message">请输入姓名</label>
<!--    <input type="text" id="message" v-bind:value="name" v-on:input="inputChange($event)">-->
    <input type="text" id="message" v-bind:value="name" v-on:input="name = $event.target.value">

    <div>欢迎 {{ name }}！</div>
</div>
<script type="module">
    import {createApp, ref} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
            setup(){
                let name = ref(null)
                // name = "abcque"

                function inputChange(event) {
                    /*let element = document.getElementById("message");
                    // console.log(element.value);
                    name.value = element.value*/

                    // console.log(event);
                    name.value = event.target.value
                }
                return {
                    name,
                    inputChange,
                }
            }
        }
    )

    app.mount("#app")
</script>
</body>
</html>